<template>
  <div>
    <el-dialog
      class="my_dialog"
      v-bind="$attrs"
      v-on="$listeners"
      v-draggable
      width="700px"
      :visible="visible"
      @open="onOpen"
      @close="onClose"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="员工姓名" prop="employeeId">
          <el-input
            v-model="empName"
            placeholder="请选择员工"
            clearable
            :style="{ width: '100%' }"
            readonly
            @click.native="empVisible = true"
          />
        </el-form-item>
        <el-form-item label="员工编码">
          <el-input
            v-model="empCode"
            placeholder="员工编码"
            clearable
            :style="{ width: '100%' }"
            readonly
          ></el-input>
        </el-form-item>

        <el-form-item label="所属部门">
          <el-input
            v-model="empDeptName"
            placeholder="所属部门"
            clearable
            :style="{ width: '100%' }"
            readonly
          ></el-input>
        </el-form-item>


        <el-form-item label="班组名称" prop="groupId">
          <el-input
            v-model="groupName"
            placeholder="请选择班组"
            clearable
            :style="{ width: '100%' }"
            readonly
            @click.native="groupVisible = true"
          />
        </el-form-item>
        <el-form-item label="班组编码">
          <el-input
            v-model="groupCode"
            placeholder="班组编码"
            clearable
            :style="{ width: '100%' }"
            readonly
          ></el-input>
        </el-form-item>

        <el-form-item label="所属部门">
          <el-input
            v-model="groupDeptName"
            placeholder="所属部门"
            clearable
            :style="{ width: '100%' }"
            readonly
          ></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status" required>
          <el-switch
            v-model="formData.status"
            :active-value=0
            :inactive-value=1
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
    <div>
      <!--   人员选择   -->
      <employeeList :visible.sync="empVisible" @Ok="employeeOk"/>
      <!--   班组选择   -->
      <groupList :visible.sync="groupVisible" @Ok="groupOk"/>
    </div>
  </div>
</template>
<script>
  import employeeList from "./employeeList";
  import groupList from "./groupList"

  export default {
    inheritAttrs: false,
    components: {employeeList, groupList},
    props: ["title", "visible", "item"],
    data() {
      return {
        formData: {
          groupId: "",
          employeeId: "",
          status: 0,
          remark: "",
        },
        rules: {
          groupId: [
            {
              required: true,
              message: "请选择班组",
              trigger: "blur",
            }
          ],
          employeeId: [
            {
              required: true,
              message: "请选择员工",
              trigger: "blur",
            }
          ],
        },
        // 人员选择
        empVisible: false,
        empName: "",
        empCode: "",
        empDeptName: "",
        // 班组选择
        groupVisible: false,
        groupName: "",
        groupCode: "",
        groupDeptName: ""
      };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      async getDictText() {
        this.$nextTick(() => {
          if (this.item) {
            this.formData = JSON.parse(JSON.stringify(this.item));
            this.empName = this.item.empName;
            this.empCode = this.item.empCode;
            this.empDeptName = this.item.empDeptIdText;
            this.groupName = this.item.groupName;
            this.groupCode = this.item.groupCode;
            this.groupDeptName = this.item.groupDeptIdText;
          }
        });
      },
      onOpen() {
        this.getDictText();
      },
      onClose() {
        this.$refs["elForm"].resetFields();
        this.empName = "";
        this.empCode = "";
        this.empDeptName = "";
        this.groupName = "";
        this.groupCode = "";
        this.groupDeptName = "";
        this.close();
      },
      close() {
        this.$emit("update:visible", false);
      },
      handleConfirm() {
        let form = JSON.parse(JSON.stringify(this.formData));
        console.log(form);
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          this.$emit("Ok", form);
          this.close();
        });
      },
      // 人员子页面数据接收
      employeeOk(item) {
        this.formData.employeeId = item.id;
        this.empName = item.name;
        this.empCode = item.code;
        this.empDeptName = item.deptIdText;
        this.empVisible = false;
      },
      // 班组子页面数据接收
      groupOk(item) {
        this.formData.groupId = item.id;
        this.groupName = item.name;
        this.groupCode = item.code;
        this.groupDeptName = item.departmentIdText;
        this.groupVisible = false;
      }
    },
  };
</script>
<style>
</style>
